<template>
  <div class="box">
    <div class="title" style="margin-bottom: 15px">菜品管理</div>
    <main class="app-main">
      <div class="container">
        <div class="top" style="display: flex; justify-content: space-between">
          <!--          搜索-->
          <div class="search" style="width: 200px">
            <el-input
              v-model="params.name"
              clearable
              placeholder="请输入菜品名称"
              @clear="search"
              @keyup.enter.native="searchDebounce.debouncedFunc"
            >
              <i
                slot="prefix"
                class="el-input__icon el-icon-search"
                @click="search"
              />
            </el-input>
          </div>
          <!--          添加-->
          <div class="addEmployee">
            <el-button
              size="mini"
              type="text"
              style="color: #f56c6c"
              @click="batchDelete"
              >批量删除</el-button
            >
            <span class="btn-divider" style="height: 16px; margin: 0 15px" />
            <el-button size="mini" type="text" @click="batchStartSale"
              >批量启售</el-button
            >
            <span class="btn-divider" style="height: 16px; margin: 0 15px" />
            <el-button
              size="mini"
              type="text"
              style="color: #f56c6c"
              @click="batchStopSale"
              >批量停售</el-button
            >
            <el-button
              type="primary"
              style="margin-left: 15px"
              @click="$router.push('/dish/addDish')"
              >+ 新建菜品</el-button
            >
          </div>
        </div>
        <!-- 表格 -->
        <div class="table">
          <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="菜品名称" width="180" />
            <el-table-column label="图片" width="180">
              <template #default="scope">
                <!-- 用v-viewer指令包裹img，自动实现点击放大+缩放/拖拽 -->
                <div v-viewer>
                  <img
                    :src="`/dev-api/common/download?name=${scope.row.image}`"
                    alt="菜品图片"
                    style="
                      width: 40px;
                      height: 40px;
                      object-fit: cover;
                      cursor: pointer;
                    "
                    @error="handleImageError"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="菜品分类" width="180" />
            <el-table-column label="售价" width="180">
              <template #default="scope">
                ¥ {{ (scope.row.price / 100).toFixed(2).replace('.00', '') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="售卖状态"
              width="180"
              :formatter="formatStatus"
            />
            <el-table-column
              prop="updateTime"
              label="最后操作时间"
              min-width="180"
            />
            <el-table-column label="操作" min-width="180">
              <template #default="scope">
                <el-button size="mini" type="text" @click="edit(scope.row.id)"
                  >修改</el-button
                >
                <span class="btn-divider" />
                <el-button
                  size="mini"
                  type="text"
                  @click="setSaleStatus(scope.row.id, scope.row.status)"
                >
                  {{ scope.row.status === 1 ? '停售' : '启售' }}
                </el-button>
                <span class="btn-divider" />
                <el-button
                  size="mini"
                  type="text"
                  style="color: #f56c6c"
                  @click="delDish(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页组件 -->
        <div class="page-container">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="params.page"
            :limit.sync="params.pageSize"
            @pagination="getDishList"
          />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { getDishListAPI, delDishAPI, setSaleStatusAPI } from '@/api/dish'
import Pagination from '@/components/Pagination'
import { createSearchDebounce } from '@/utils/debounceSearch'
export default {
  components: { Pagination },
  data () {
    return {
      params: {
        page: 1,
        pageSize: 10,
        name: ''
      },
      tableData: [],
      total: 0,
      selectionVal: [],
      // 存储防抖实例（方便销毁时清理）
      searchDebounce: null
    }
  },
  created () {
    this.getDishList()
    // 初始化防抖函数：传入实际的搜索逻辑 500ms 内连续按 Enter 只会执行一次搜索
    this.searchDebounce = createSearchDebounce(this.search, 500)
  },
  beforeDestroy () {
    // 组件销毁时，取消防抖（关键：避免内存泄漏）
    this.searchDebounce?.cancel()
  },
  methods: {
    edit (id) {
      this.$router.push({
        path: '/dish/addDish',
        query: {
          id: id
        }
      })
    },
    // 删除
    delDish (id) {
      // console.log('id', id)
      this.$confirm('确认删除该菜品，是否继续？', '温馨提示')
        .then(async () => {
          // 点击确定后执行
          await delDishAPI(id)
          this.$message.success('删除成功')
          this.getDishList()
        })
        .catch(() => {})
    },
    // 批量启售
    batchStartSale () {
      this._batchSetStatus(1, '启售')
    },
    // 批量停售
    batchStopSale () {
      this._batchSetStatus(0, '停售')
    },
    // 批量状态修改公共方法
    _batchSetStatus (status, text) {
      if (this.selectionVal.length === 0) {
        this.$message.warning(`请选择需要${text}的菜品`)
        return
      }
      const ids = this.selectionVal.map(item => item.id).join(',')
      this.$confirm(`确认${text}选中的菜品吗？`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await setSaleStatusAPI(ids, status)
          this.$message.success(`批量${text}成功`)
          this.getDishList() // 刷新列表
        })
        .catch(() => {})
    },
    // 停售 启售
    setSaleStatus (ids, status) {
      this.$confirm('确认更改该菜品状态?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          status = 1 - status
          console.log(ids)
          await setSaleStatusAPI(ids, status)
          this.$message.success('菜品状态更改成功 !')
          this.getDishList()
        })
        .catch(error => console.log(error))
    },
    // 点击批量删除
    batchDelete () {
      if (this.selectionVal.length <= 0) {
        this.$message.warning('请选择删除对象')
        return
      }
      const ids = this.selectionVal.map(v => v.id)
      this.$confirm('确认删除该菜品，是否继续？', '温馨提示')
        .then(async () => {
          // 点击确定后执行
          await delDishAPI(ids.join(','))
          this.$message.success('批量删除成功')
          this.getDishList()
        })
        .catch(() => {})
    },
    // 选项框变化时执行的方法
    handleSelectionChange (val) {
      this.selectionVal = val
      // console.log(this.selectionVal)
    },
    // 分页相关函数
    // handleSizeChange (val) {
    //   // 每页多少条
    //   this.params.pageSize = val
    //   this.getDishList()
    // },
    // handleCurrentChange (val) {
    //   // 当前页码
    //   this.params.page = val
    //   this.getDishList()
    // },
    // 格式化状态
    formatStatus (row, column, cellValue, index) {
      const MAP = {
        0: '停售',
        1: '启售'
      }
      return MAP[cellValue]
    },
    // 图片没有时 用默认图片
    handleImageError (e) {
      e.target.src = '/dev-api/backend/images/noImg.png'
    },
    // 获取列表数据
    async getDishList () {
      if (this.params.name === '') delete this.params.name
      const res = await getDishListAPI(this.params)
      this.tableData = res.data.records
      this.total = res.data.total
      console.log('接口返回数据：', res.data.records)
    },
    // 清除搜索框执行的方法
    search () {
      this.params.page = 1
      this.getDishList()
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  background: #f4f6f8;
  padding: 17px;
  margin: 0;
}
.app-main {
  background: #ffffff; // 页面主区域背景改为白色
  padding: 20px;
}
.container {
  background-color: #ffffff; // 内容容器背景改为白色
}

/* 覆盖 Element-UI 表格默认背景，确保整体白色 */
::v-deep .el-table {
  background-color: #ffffff !important;
}
::v-deep .el-table__header,
::v-deep .el-table__body {
  background-color: #ffffff !important;
}
.page-container {
  text-align: center;
  margin-top: 20px;
}
/* 表格外层容器添加边框（外层边框） */
.table {
  margin-top: 20px;
  border: 1px solid #e4e7ed; /* Element UI 常用边框色，可根据需求调整 */
  border-radius: 4px; /* 可选：添加轻微圆角更美观 */
}

/* 去除表格列之间的边框 */
::v-deep .el-table {
  background-color: #ffffff !important;
  border: none; /* 取消表格自身的默认边框，避免与外层容器边框重叠 */
}

/* 去除表头单元格的左右边框 */
::v-deep .el-table__header th.el-table__cell {
  border-right: none !important; /* 取消列之间的竖线 */
}

/* 去除表体单元格的左右边框 */
::v-deep .el-table__body td.el-table__cell {
  border-right: none !important; /* 取消列之间的竖线 */
}

/* 可选：去除表格底部的默认横线（如果不需要） */
::v-deep .el-table::before {
  height: 0; /* 隐藏表格底部的横线 */
}
.btn-divider {
  display: inline-block;
  height: 12px; /* 竖线高度，可根据按钮字号调整 */
  margin: 0 6px; /* 左右间距，控制竖线与按钮的距离 */
  border-left: 1px solid #e4e7ed; /* 竖线颜色（浅灰色，营造“隐约”效果） */
  vertical-align: middle; /* 垂直居中，与按钮对齐 */
}
/* 搜索图标悬浮小手效果 */
::v-deep .el-input__prefix .el-input__icon {
  cursor: pointer; /* 核心：悬浮时显示小手 */
}

/* 可选：添加轻微hover效果增强交互感 */
::v-deep .el-input__prefix .el-input__icon:hover {
  color: #409eff; /* hover时图标变蓝（Element UI主题色） */
}
</style>
